<template lang="pug">
  el-dialog(
    :title="type === 1 ? '基本信息导入' : '人脸照片批量导入'"
    :visible="visibleDialog"
    width="540px"
    center
    @close="$_closeHandle"
  )
    el-alert.warningBox(type="warning" :closable="false")
      div.c_regular(v-if="type === 1") 
        p
          span
            | 1、请用户先点击下载文件
          a(href="BASE_URL + '/static/download/医师药师信息导入模板.xlsx'" class="c_primary" download="医师药师信息导入模板.xlsx")
            | 《医师药师信息导入模板》
        p 2、下载模板文件到本机后按照模板要求进行填写;
        p 3、填写完模板文件并保存然后上传模板文件;
        p 4、如果用户没有按照模板要求填写，医师药师信息将添加失败;
        p 5、切记用户不能使用自定义模板填写医师药师信息;
      div.c_regular(v-else)
        p 1、只支持上传.jpg(人脸)、.bmp(指静脉、指纹、虹膜)格式的照片
        p 2、最大允许上传1M照片
        p 3、照片名称为身份证号码
        p 4、照片目录是指存放于应用服务器的路径
    .mt20
      upload-file(
        v-if="type === 1"
        btnSize="medium"
        accept=".xls,.xlsx"
        :showFileList="false"
        @uploadFile="uploadFile"
      )
      form-box(
        v-else
        :items="batchItems"
        :layoutCol="{sm: 24, md: 24, lg: 24}"
        @cancelHandle="$_closeHandle"
        :submitHandle="batchSubmit"
        )
</template>
<script>
import { UploadFile, FormBox } from '@/components'

const batchItems = [
  {
    key: 'filePath',
    label: '照片目录',
    placeholder: '如：/home/image/faces',
    rules: [{ required: true, message: '请输入导入目录' }]
  },
  {
    key: 'bioType',
    label: '生物类型',
    type: 'selectdict',
    dictKey: 'bioType',
    rules: [{ required: true, message: '请选择生物类型' }]
  }
]

export default {
  components: {
    UploadFile,
    FormBox
	},
	props: {
		type: {
      type: Number,
      default: 1
    },
		visible: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		visibleDialog: {
			get () {
				return this.visible
			},
			set (val) {
				this.$emit('update:visible', val)
			}
		}
	},
	data () {
		return {
			batchItems // 批量导入表单项
		}
	},
	methods: {
		uploadFile (data) {
      console.log(data)
    },
    // 批量导入
    batchSubmit (vals) {
      console.log(vals)
    },
    $_closeHandle () {
      this.visibleDialog = false
    }
	}
}
</script>
<style lang="scss" scoped>
.warningBox{
  padding: 12px;
  p {
    line-height: 1.8
  }
}
</style>
